<template>
  <div class="home">
    <div class="silder">
      <Menu mode="vertical" style="width: 250px" v-model="menuValue">
          <MenuItem v-for="item in menuList" :key="item.name" :name="item.name" :to="item.to">
            {{item.value}}
          </MenuItem>
      </Menu>
    </div>
    <div class="main">
      <div class="header">
      <h1>JimoUI</h1>
      <Menu style="justify-content: flex-end">
        <MenuItem name="1">
          关于
        </MenuItem>
        <MenuItem name="2">
          <a href="https://gitee.com/zjinxiaoliang/jimo-ui">Gitee</a>
        </MenuItem>
      </Menu>
    </div>
      <div class="content">
        <router-view />
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuValue: '1',
      menuList: [
        { name: '1', to: 'download', value: '安装' },
        { name: '2', to: 'split', value: '分割面板' }
      ]
    }
  },
  created () {
    this.menuList.forEach(item => {
      if (item.to === this.$route.name) {
        this.menuValue = item.name
      }
    })
  }
}
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
}
.header h1 {
  border-bottom: 1px solid #ccc;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.silder {
  position: fixed;
  bottom: 0;
  left: 0;
  top:60px;
  background: #fff;
  width: 250px;
  height: 100%;
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin:100px 100px 100px 300px;
}
</style>
